<template>
  <div
    class="mt-40px mb-20px w-1146px flex flex-col items-center"
    v-if="imgListWithSplice.length > 0"
    :class="randomKey"
  >
    <div class="w-1102px flex flex-row items-center">
      <h3 class="text-28px font-bold text-#160C35">{{ data.name }}</h3>
      <div class="flex-1"></div>
      <div
        class="h-32px px-20px box-border flex flex-row items-center bg-#E0E6F1 rounded-16px hover:shadow"
      >
        <div class="ml-6px text-16px font-500 text-#242633 cursor-pointer">看到更多</div>
      </div>
    </div>
    <div class="mt-16px w-1146px h-326px relative" v-if="imgListWithSplice.length > 0">
      <button
        v-if="imgListWithSplice.length > 1"
        class="absolute left-0 top-[50%] translate-y-[-50%] w-44px h-44px flex items-center justify-center bg-#bg01 z-2 rounded-[50%] swiper-button-prev1 cursor-pointer"
      >
        <img class="w-25px h-25px" src="@/assets/left1.svg" alt="" />
      </button>
      <button
        v-if="imgListWithSplice.length > 1"
        class="absolute right-0 top-[50%] translate-y-[-50%] w-44px h-44px flex items-center justify-center bg-#bg01 z-2 rounded-[50%] swiper-button-next1 cursor-pointer"
      >
        <img class="w-25px h-25px" src="@/assets/right1.svg" alt="" />
      </button>
      <Swiper
        :modules="[Navigation]"
        :slides-per-view="1"
        :space-between="0"
        :navigation="navigation"
      >
        <swiper-slide v-for="(imgList, index) in imgListWithSplice" :key="index">
          <div class="w-1146px h-345px px-13px box-border flex flex-row">
            <UserItem v-for="item in imgList" :item="item" :key="item.id" />
          </div>
        </swiper-slide>
      </Swiper>
    </div>
    <Emtpy title="暂无数据" v-else />
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'

import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { getUserWithSkills } from '@/api/user'
import Emtpy from '@/components/empty/index.vue'
import UserItem from './user-item.vue'
import 'swiper/css'
const randomKey = 'class' + new Date().getTime()

const props = defineProps(['data'])
const gameId = computed(() => props.data.id)
const userWithSkillList = ref([])

const userWithSkillListWithPrice = computed(() => {
  //陪玩类型 0分钟 1局数 2天数
  const typeTextMap = ['分钟', '局数', '天数']
  return userWithSkillList.value.map((item) => {
    const time = item?.play_time > 1 ? item?.play_time : ''
    return {
      ...item,
      text: '/' + time + typeTextMap[item.type]
    }
  })
})

watchEffect(() => {
  if (gameId.value) {
    getUserWithSkills({
      id: gameId.value,
      page: 1,
      pageSize: 10
    }).then((res) => {
      userWithSkillList.value = res.list || []
    })
  }
})

const imgListWithSplice = computed(() => {
  const imgLineCount = 5
  let arr = []
  userWithSkillListWithPrice.value.forEach((img, index) => {
    const idx = Math.floor(index / imgLineCount)
    if (!arr[idx]) arr[idx] = []
    arr[idx].push(img)
  })
  return arr
})
const navigation = ref({
  nextEl: '.' + randomKey + ' .swiper-button-next1',
  prevEl: '.' + randomKey + ' .swiper-button-prev1'
})
</script>

<style></style>
